<template>
    <div class="title">SVG属性动画</div>
    <svg viewBox="0 0 100 100" class="SVG">
        <polygon class="item"
            points="50,5.5 64.4,34.8 96.7,39.5 73.4,62.3 78.9,94.5 50,79.3 21.1,94.5 26.6,62.3 3.3,39.5 35.6,34.8 " />
    </svg>

    <svg viewBox="0 0 100 100" class="SVG">
        <polygon class="item2"
            points="50,5.5 64.4,34.8 96.7,39.5 73.4,62.3 78.9,94.5 50,79.3 21.1,94.5 26.6,62.3 3.3,39.5 35.6,34.8 " />
    </svg>
    <br><br>
</template>
<script setup>

</script>
<style lang="less" scoped>
.title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #999;
}

.SVG {
    height: 100px;
}

.item {
    fill: none;
    stroke: #F60;
    stroke-width: 4;
    stroke-dasharray: 10, 10;
    animation: dash linear infinite 1s;
}

@keyframes dash {
    to {
        stroke-dashoffset: 20;
    }
}

.item2 {
    fill: none;
    stroke: #F60;
    stroke-width: 4;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: dash2 linear infinite 10s;
}

@keyframes dash2 {
    to {
        stroke-dashoffset: -340;
    }
}
</style>